<template>
  <div class="app">
    <!-- 全局配置 -->
    <n-config-provider :theme="theme" :hljs="hljs">
      <!-- 通知 -->
      <n-message-provider>
        <MessageContent />
      </n-message-provider>
      <!-- 头部 -->
      <n-layout-header bordered>
        <Top />
      </n-layout-header>
      <!-- 布局 -->
      <n-layout has-sider>
        <!-- 侧边栏 -->
        <n-space vertical class="n-space-sider">
          <n-layout-sider
            :collapsed="collapsed"
            :collapsed-width="64"
            :width="240"
            :native-scrollbar="false"
            collapse-mode="width"
            show-trigger="arrow-circle"
            @collapse="collapsed = true"
            @expand="collapsed = false"
          >
            <n-menu
              :value="menuValue"
              :collapsed="collapsed"
              :collapsed-width="64"
              :collapsed-icon-size="22"
              :options="menuOptions"
            />
          </n-layout-sider>
          <!-- 控制缩放 -->
          <div class="sider-bottom">
            <n-switch size="small" v-model:value="collapsed">
              <template #checked>缩</template>
              <template #unchecked>伸</template>
            </n-switch>
          </div>
        </n-space>
        <!-- 内容 -->
        <n-layou
          :native-scrollbar="false"
          class="content max-height min-height"
          :class="[collapsed ? 'width-collapsed' : 'width']"
        >
          <!-- 加载loading条 -->
          <n-loading-bar-provider>
            <router-view />
          </n-loading-bar-provider>
        </n-layou>
      </n-layout>
    </n-config-provider>
  </div>
</template>

<script>
import { computed, defineComponent, ref } from 'vue'
import { darkTheme } from 'naive-ui'
import hljs from 'highlight.js/lib/core'
import javascript from 'highlight.js/lib/languages/javascript'
import Top from './views/top/index.vue'
import { menuOptions } from './config/menu.config'
import MessageContent from './components/MessageContent/index.vue'
import { useRoute } from 'vue-router'

export default defineComponent({
  name: 'App',
  components: {
    Top,
    MessageContent
  },
  setup() {
    const route = useRoute()
    const routeRame = computed(() => route.name)
    const menuValue = ref(routeRame)

    hljs.registerLanguage('javascript', javascript)
    return {
      hljs,
      darkTheme,
      menuOptions,
      menuValue,
      collapsed: ref(false),
      theme: ref(null)
    }
  }
})
</script>

<style lang="scss" scoped>
::v-deep(*) {
  .n-space-sider {
    div:first-child {
      flex: 1;
    }
  }
}
.app {
  .n-space-sider {
    border-right: 2px solid rgb(239, 239, 245);
  }
  .sider-bottom {
    padding: 10px;
  }
  .content {
    &.width {
      width: calc(100vw - 240px);
    }
    &.width-collapsed {
      width: calc(100vw - 64px);
    }
    padding: 20px;
    transition: width 0.5s ease 0s;
  }
}
</style>
